﻿@{
    ViewBag.Title = "Справочник перекодировки товаров";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<header class="jumbotron subhead" id="overview">
    <h1>Соответствие товаров</h1>
    <p class="lead">Просмотр перечня товаров, ожидающих выставления соответствия</p>
</header>

<table data-name="ITEMS_MAPPING" class="table table-striped">
    <thead>
        <tr>
            <th data-name="COMPANY_NAME">
                Компания
            </th>
            <th data-name="ITEM_NAME">
                Наименование товара
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<p>
    <a href="#" class="btn" data-action="refresh" data-name="ITEMS_MAPPING"><i class="icon-refresh"></i> Обновить</a>
</p>

<div class="modal hide" data-name="ITEMS_MAPPING">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Установить соответствие</h3>
    </div>

    <div class="modal-body">

        <form name="ITEMS_MAPPING" class="form-horizontal" method="post"> 
            <fieldset> 
                
                <input type="hidden" name="SUPPLIER_ITEM_GUID" value="">

                <div class="control-group"> 
                    <label class="control-label" for="COMPANY_NAME">Компания</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" name="COMPANY_NAME" value="" readonly="readonly">
                    </div> 
                </div> 
                
                <div class="control-group"> 
                    <label class="control-label" for="ITEM_NAME">Наименование товара</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" name="ITEM_NAME" value="" readonly="readonly">
                    </div> 
                </div> 
                
                <div class="control-group">
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" class="input-medium" name="FILTER" value="" />
                            <button class="btn" type="button" data-action="filter"><i class="icon-filter"></i></button>
                        </div>
                    </div>
                </div>

                <div class="control-group"> 
                    <label class="control-label" for="ITEM_GUID">Наименование товара</label>
                    <div class="controls">
                        <select 
                            data-value="GUID_RECORD" 
                            data-text="ITEM_NAME" name="ITEM_GUID"></select>
                    </div> 
                </div> 

            </fieldset>
        </form>
        
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Закрыть</a>
        <a href="#" class="btn btn-primary" data-action="ITEMS_MAPPING-save">Сохранить</a>
    </div>
</div>



<script type="text/javascript">

    $(function () {
        var office = new Office();

        $.get("/edex/api/ITEMS_MAPPING/GetUnbinding/", function (data) {

            office.Store["ITEMS_MAPPING"] = data;

            office.Grid({
                tableName: "ITEMS_MAPPING",
                index: "ITEM_GUID",
                data: data
            });
        });


        $(".btn[data-action='filter']").on("click", function () {

            var filter = $("input[name='FILTER']").val();
            var uri = "/edex/api/WH_ITEMS/";

            if (filter != "")
                uri += "?$filter=substringof('" + filter + "', ITEM_NAME) eq true&$top=100&$orderby=ITEM_NAME";

            $.get(uri, function (data) {

                var element = $("select[name='ITEM_GUID']");
                var name = element.attr("data-name");
                var data_value = element.attr("data-value");
                var data_text = element.attr("data-text");

                element.empty();

                $.each(data, function (index, itemData) {

                    var option = $("<option>");

                    option.val(getValueByPath(itemData, data_value));
                    option.text(getValueByPath(itemData, data_text));

                    element.append(option);
                });

            });
        });

        $(".btn[data-action='ITEMS_MAPPING-save']").on("click", function () {

            var modal = $(this).parents(".modal");

            var uri = "/edex/api/ITEMS_MAPPING/?"
                + "ITEM_GUID=" + $("select[name='ITEM_GUID']").val()
                + "&SUPPLIER_ITEM_GUID=" + $("input[name='SUPPLIER_ITEM_GUID']").val();
            var type = "POST";

            $.ajax({
                type: type,
                url: uri
            }).done(function () {
                modal.modal("hide");
            });
        });



        $(".btn[data-action='refresh']").on("click", function () {
            $.get("/edex/api/ITEMS_MAPPING/GetUnbinding/", function (data) {

                office.Store["ITEMS_MAPPING"] = data;

                office.Grid({
                    tableName: "ITEMS_MAPPING",
                    data: data
                });
            });
        });


        $("table[data-name='ITEMS_MAPPING'] tr td").live("click", function () {

            var id = $(this).parent().attr("data-id");

            $(office.Store["ITEMS_MAPPING"]).filter(function (i, r) {
                if (r["ITEM_GUID"] == id)
                    return true;
            }).each(function (i, r) {

                $('.modal[data-name="ITEMS_MAPPING"]').modal("show");

                $("input[name='SUPPLIER_ITEM_GUID']").val(id);
                $("input[name='COMPANY_NAME']").val(r["COMPANY_NAME"]);
                $("input[name='ITEM_NAME']").val(r["ITEM_NAME"]);
            });
        });







        $(".btn[data-action='create']").on("click", function () {

            var name = $(this).attr("data-name");
            var modal = $(".modal[data-name='" + name + "']");

            modal.modal("show");
        });

        $('.modal').on("show", function () {
            $(this).find("input").val("");
            $(this).find("select").val("");
            $(this).find("textarea").val("");
            $(this).find("tbody").empty();
        });

    });

</script>